<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格js方法渲染</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
</head>


<body>

<table id="demo001" lay-filter="test001filter"></table>



<!-- 模板选择器
注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：
     序号：{{ d.LAY_INDEX }} （该额外字段为 layui 2.2.0 新增）
-->
<script type="text/html" id="titleTpl">
    <a href="https://www.baidu.com" class="layui-table-link">{{d.username}}</a>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>



<script src="../zujian/layui/layui.all.js"></script>
<script type="text/javascript">
    let $=layui.jquery;
    //所谓的鼠标悬停其实就是给 th和td标签加title属性
    function 鼠标悬停(){
        $('th').each(function(index,element){
            $(element).attr('title',$(element).text());
        });
        $('td').each(function(index,element){
            $(element).attr('title',$(element).text());
        });
    };


    layui.use('table', function(){
        var table = layui.table;
        //备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，
        // 详见目录：表格重载
        //第一个实例
        table.render({
            //设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。
            //值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从 <table id="test"></table> 中的 id 参数中获取。
            id:'fuck001'
            // 定义 table 的大标题（在文件导出等地方会用到）//导出到excel等要用到的
            ,title:'table大标题'
            ,elem: '#demo001'//<table id="demo001" lay-filter="test001"></table>

            // 默认 true，即直接由 table 组件在前端自动处理排序。
            //若为 false，则需自主排序，通常由服务端直接返回排序好的数据。
            //注意：该参数为 layui 2.4.4 新增
            ,autoSort:true


            // 初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。
            ,initSort: {
                field: 'score' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }


            ,height: 400//容器高度
            ,width:1020//容器宽度
            //可以是网络数据但是必须符合 《ceshi表格数据.json中的格式》
            // 如果是网络数据 需要传到后端  当前页和每页显示数,然后返回数据里count有总条数
            //注意  page=1是当前页   limit=30  是每页显示数
            //注意 该page插件直接自己记录当前页和每页显示数, 后端传过来count总条数后,自动计算总页数显示在下面点击的最后


            // 注意 ?page=1&limit=30在点击后会自动添加到url后面,后台根据当前页page,和每页显示数limit就能取到数据,后台在json里把总记录数count传回来
            // ,url:'http://127.0.0.1:80/phptest01/phpTestLayUiPageFenYe.php'
           ,url: './ceshi表格数据.json' //数据接口  本地测试

            //直接展示一段数据//此时不用url了//注意直接展示的数据必须是数组
            //  ,data:[{"id":"lksdafjlsfkl112elksdjfhgjg","username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]




            // 自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。当数据来自url的时候有用
            ,text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }


            // ,page: true //开启分页
            ,page:{theme: '#c00'}

            ,limit:1500//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数
            ,limits:[10,15,18,20,30,40,50,60,70,80,90]
            //（layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
            ,cellMinWidth:80
            ,loading:true//显示加载条为true url的时候有用


            //开启表格头部工具栏区域，该参数支持四种类型值：
            //toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
            //         toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
            //         toolbar: true //仅开启工具栏，不显示左侧模板
            //         toolbar: 'default' //让工具栏左侧显示默认的内置模板
            //         注意：
            // 1. 该参数为 layui 2.4.0 开始新增。
            // 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
            ,toolbar:'default'//开启表格头部工具栏

            ,defaultToolbar: [
                'filter'//过滤显示那个字段
                , 'print'//打印数据
                , 'exports'//导出数据到excel或者cvs
                , {
                //上面是内置工具,下面是自定义一个工具到工具栏
                title: '提示' //标题
                ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                ,icon: 'layui-icon-tips' //图标类名
                // ,icon:'layui-icon-star-fill'
            }]




            //ine （行边框风格）
            //row （列边框风格）
            //nob （无边框风格）
            // ,skin: 'line' //行边框风格
            // ,even: true //开启隔行背景
            //sm （小尺寸）
            //lg （大尺寸）
            // ,size: 'lg' //小尺寸的表格


            // 是否开启<合计>行
            ,totalRow:true


            //设置列以及列的性质
            ,cols: [[ //表头
                {field: 'id', title: 'ID'
                    // 设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比
                    //请结合实际情况，对不同列做不同设定。
                    , width:80
                    //局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth
                    //,minWidth:80
                    , sort: true
                    //, fixed: 'left'
                    // 设定列类型。可选值有：
                    // normal（常规列，无需设定）
                    // checkbox（复选框列）
                    // radio（单选框列，layui 2.4.0 新增）
                    // numbers（序号列）
                    // space（空列）
                    // ,type:'checkbox'
                    //是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。
                   // ,LAY_CHECKED:false
                    ,style:'background-color:#5FB878;color:#fff;'
                }



                ,{field:'username', title:'用户名', width:80
                    // 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右）
                    ,align:'right'
                    //单元格所占列数（默认：1）。一般用于多级表头
                    //,colspan:'3'
                    // ,rowspan:3

                    // id 为 titleTpl的模板,结果是点击这一列跳转一个页面
                    ,templet: '#titleTpl'

                    //,toolbar: '#barDemo'

                }

                ,{field: 'sex', title: '性别', width:80, sort: true}

                ,{field: 'city', title: '城市', width:80
                    // 固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。
                    // 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。
                    //,fixed:'left'
                    // 是否初始隐藏列，默认：false。layui 2.4.0 新增
                    ,hide:false
                }



                ,{field: 'sign', title: '签名', width: 80}
                ,{
                    field: 'experience', title: '积分', width: 80
                    //用于显示自定义的合计文本。layui 2.4.0 新增
                    ,totalRowText:'总计'
                    //是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
                    //注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。
                    // 比如：'贤心' > '2' > '100'，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。
                    ,sort:true
                    //是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。
                    // 而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
                    ,unresize:true//true的时候禁用列宽
                    // 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理
                    ,event:'click积分单元格点击事件名'
                }


                ,{field: 'score', title: '评分', width: 80, sort: true
                    //是否开启该列的自动合计功能，默认：false。
                    //当开启时，则默认由前端自动合计当前行数据。从 layui 2.5.6 开始：
                    // 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如 《ceshi表格数据.json》文件中的返回
                    ,totalRow:true
                    //用于显示自定义的合计文本。layui 2.4.0 新增
                    ,totalRowText:'总计'
                    //单元格编辑类型（默认不开启）目前只支持：text（输入框）
                    ,edit:'text'
                }




                ,{field: 'classify', title: '职业', width: 80}
                ,{field: 'wealth', title: '财富', width: 135, sort: true
                    //单元格编辑类型（默认不开启）目前只支持：text（输入框）
                    ,edit:'text'}


                ,{field:'operate',title:'操作'
                //绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮
                    //对应下面的 table.on('tool(test001filter)', function(obj){
                ,toolbar: '#barDemo'
                }

            ]]



            ,done:function () {
                //就是加title属性
                鼠标悬停();
                // alert('表格渲染完的操作');
            }




        });
        // 监听单元格编辑//单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：
        // 监听单元格编辑可以直接把编辑过的发送到后台,然后操作数据库
        table.on('edit(test001filter)', function(obj){ //注：edit是固定事件名，test001是table原始容器的属性 lay-filter="对应的值"
            //监听单元格编辑可以直接把编辑过的发送到后台,然后操作数据库
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据//编辑后的该行数据
            alert(JSON.stringify(obj.data));
        });



        //监听工具条以及自定义单元格事件
        table.on('tool(test001filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）


            //  列里面设置的  ,toolbar: '#barDemo'模板 对应上面的 lay-event="detail"
            if(layEvent === 'detail'){ //查看
                layer.msg(JSON.stringify(data),{time:10000,closeBtn:true})
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑

                //do something
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
                //点击单元格事件
            }else if(layEvent==='click积分单元格点击事件名'){
                alert('点击积分单元格自定义事件')
            }
        });


        //监听toolbar事件,就是监听工具栏事件
        table.on('toolbar(test001filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('自定义toolbar事件！')
                    break;
            }
        });



    });
</script>
<!--
{"code":0,"msg":"","count":1000,"data":
[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57}
,{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27}
,{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31}
,{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68}
,{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6}
,{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87}
,{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34}
,{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28}
,{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14}
,{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}
,{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34}
,{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6}
,{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54}
,{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63}
,{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8}
,{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28}
,{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86}
,{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69}
,{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74}
,{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51}
,{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87}
,{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]}
-->
</body>
</html>